<script setup lang='ts'>

interface Props {
  modelValue?: number
  list: {
    [t: string]: any
    label: string
    value: number
    icon?: string
    useCloudImg?: boolean
  }[]
}

defineOptions({ name: 'AppSportsTab' })

defineProps<Props>()
const emit = defineEmits(['update:modelValue'])

function onItemClick(tab: IBaseTabItem) {
  emit('update:modelValue', tab.value)
}
</script>

<template>
  <BaseSportsTab :current="modelValue" :list="list" @item-click="onItemClick">
    <template #item="{ data: { item, active } }">
      <div class="item" :class="{ active }">
        <div v-show=item.icon class=" flex items-center  mr-[4px] w-[22px] h-[22px] p-[3px] justify-center">
          <BaseImage is-network :url="item.icon" />
        </div>
        {{ item.label }}
      </div>
    </template>
  </BaseSportsTab>
</template>

<style lang='scss' scoped>
.item {
  color: var(--color-text-white-0);
  border-radius: 18px;
  padding: 0 12px;
  background: var(--color-bg-black-3);
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;

  &.active {
    color: #000;
    background: #24ee89;
    --tg-base-icon-color: #000;
  }
}
</style>
